<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <!-- 导入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <!-- 导入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <!-- 容器 --> 
    <div id="app">
        <!-- <input type="text" placeholder="请输入用户名" v-model='username'>
        <input type="text" placeholder="请输入密码" v-model='password'> -->

        <input type="text" placeholder="请输入用户名" v-model='obj.username'>
        <input type="password" placeholder="请输入密码" v-model='obj.password'>
        <button @click='login'>登录</button>
    </div>
    <script>
        new Vue({
            // 将vue实例与容器进行绑定
            el:'#app',
            // data中的变量可以直接在容器中使用
            methods:{
                login() {
                    axios({
                        url:'http://47.93.255.92:8001/user/login',
                        method:'post',
                        data:this.obj
                    }).then((res)=>{
                        if(res.data.status == 200) {
                            this.$notify({
                                title: '成功',
                                message: '登录成功',
                                type: 'success'
                            });
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: res.data.message
                            });
                        }    
                    })
                }
            },
            data(){
                return {
                    // username:'xpf',
                    // password:''
                    obj:{}
                }
            }
        })
    </script>
</body>
</html>